<template>
    <view :class="[themeName,model.theme.box.class]" :style="model.theme.box.style" class="wy-form-group-easy">
        <wy-form-group :themeName="themeName" :screenSize="screenSize" :dataSource="model.group">
            <view :class="[model.theme.group.class]" :style="model.theme.group.style" v-for="(input,index) in inputList" :key="index">
                <wy-form-group-easy :customComponents="customComponents" :themeName="themeName" :screenSize="screenSize" v-if="input.type=='group'" :dataSource="input">
                    <!-- #ifdef VUE3 -->
                    <template      v-if="input.slots.includes('slot1')" #slot1><slot  name="slot1"></slot></template>
                    <template v-if="input.slots.includes('slot2')" #slot2><slot  name="slot2"></slot></template> 
                    <template v-if="input.slots.includes('slot3')" #slot3><slot  name="slot3"></slot></template>
                    <template v-if="input.slots.includes('slot4')" #slot4><slot  name="slot4"></slot></template>
                    <template v-if="input.slots.includes('slot5')" #slot5><slot  name="slot5"></slot></template>
                    <template v-if="input.slots.includes('slot6')" #slot6><slot  name="slot6"></slot></template>
                    <template v-if="input.slots.includes('slot7')" #slot7><slot  name="slot7"></slot></template>
                    <template v-if="input.slots.includes('slot8')" #slot8><slot  name="slot8"></slot></template>
                    <template v-if="input.slots.includes('slot9')" #slot9><slot  name="slo9"></slot></template>
                    <template v-if="input.slots.includes('slot10')" #slot10><slot  name="slot10"></slot></template>
                    <template v-if="input.slots.includes('slot11')" #slot11><slot  name="slot11"></slot></template>
                    <template v-if="input.slots.includes('slot12')" #slot12><slot  name="slot12"></slot></template>
                    <template v-if="input.slots.includes('slot13')" #slot13><slot  name="slot13"></slot></template>
                    <template v-if="input.slots.includes('slot14')" #slot14><slot  name="slot14"></slot></template>
                    <template v-if="input.slots.includes('slot15')" #slot15><slot  name="slot15"></slot></template>
                    <template v-if="input.slots.includes('slot16')" #slot16><slot  name="slot16"></slot></template>
                    <template v-if="input.slots.includes('slot17')" #slot17><slot  name="slot17"></slot></template>
                    <template v-if="input.slots.includes('slot18')" #slot18><slot  name="slot18"></slot></template>
                    <template v-if="input.slots.includes('slot19')" #slot19><slot  name="slot19"></slot></template>
                    <template v-if="input.slots.includes('slot20')" #slot20><slot  name="slot20"></slot></template>
                    <!-- #endif -->
                    <!-- #ifndef VUE3 -->
                    <template  v-for="(s,i) in input.slots">
                        <view slot="slot1" :key="i" v-if="s=='slot1'"><slot name="slot1"></slot></view>
                        <view slot="slot2" :key="i" v-else-if="s=='slot2'"><slot name="slot2"></slot></view>
                        <view slot="slot3" :key="i" v-else-if="s=='slot3'"><slot name="slot3"></slot></view>
                        <view slot="slot4" :key="i" v-else-if="s=='slot4'"><slot name="slot4"></slot></view>
                        <view slot="slot5" :key="i" v-else-if="s=='slot5'"><slot name="slot5"></slot></view>
                        <view slot="slot6" :key="i" v-else-if="s=='slot6'"><slot name="slot6"></slot></view>
                        <view slot="slot7" :key="i" v-else-if="s=='slot7'"><slot name="slot7"></slot></view>
                        <view slot="slot8" :key="i" v-else-if="s=='slot8'"><slot name="slot8"></slot></view>
                        <view slot="slot9" :key="i" v-else-if="s=='slot9'"><slot name="slot9"></slot></view>
                        <view slot="slot10" :key="i" v-else-if="s=='slot10'"><slot name="slot10"></slot></view>
                        <view slot="slot11" :key="i" v-else-if="s=='slot11'"><slot name="slot11"></slot></view>
                        <view slot="slot12" :key="i" v-else-if="s=='slot12'"><slot name="slot12"></slot></view>
                        <view slot="slot13" :key="i" v-else-if="s=='slot13'"><slot name="slot13"></slot></view>
                        <view slot="slot14" :key="i" v-else-if="s=='slot14'"><slot name="slot14"></slot></view>
                        <view slot="slot15" :key="i" v-else-if="s=='slot15'"><slot name="slot15"></slot></view>
                        <view slot="slot16" :key="i" v-else-if="s=='slot16'"><slot name="slot16"></slot></view>
                        <view slot="slot17" :key="i" v-else-if="s=='slot17'"><slot name="slot17"></slot></view>
                        <view slot="slot18" :key="i" v-else-if="s=='slot18'"><slot name="slot18"></slot></view>
                        <view slot="slot19" :key="i" v-else-if="s=='slot19'"><slot name="slot19"></slot></view>
                        <view slot="slot20" :key="i" v-else-if="s=='slot20'"><slot name="slot20"></slot></view>
                        <view :slot="s" :key="i" v-else-if="s"><slot :name="s"></slot></view>
                    </template>
                    <!-- #endif -->
                </wy-form-group-easy>
                <wy-form-text :themeName="themeName" :screenSize="screenSize" v-else-if="input.type=='text'" :dataSource="input"></wy-form-text>
                <wy-form-switch :themeName="themeName" :screenSize="screenSize" v-else-if="input.type=='switch'" :dataSource="input"></wy-form-switch>
                <wy-form-textarea :themeName="themeName" :screenSize="screenSize" v-else-if="input.type=='textarea'" :dataSource="input"></wy-form-textarea>
				<wy-form-text-number :themeName="themeName" :screenSize="screenSize" v-else-if="input.type=='text-number'" :dataSource="input"></wy-form-text-number>
				<wy-form-select :themeName="themeName" :screenSize="screenSize" v-else-if="input.type=='select'" :dataSource="input"></wy-form-select>
				<wy-form-datetime :themeName="themeName" :screenSize="screenSize" v-else-if="input.type=='datetime'" :dataSource="input"></wy-form-datetime>
				<wy-form-pick :themeName="themeName" :screenSize="screenSize" v-else-if="input.type=='pick'" :dataSource="input"></wy-form-pick>

				<wy-form-slot :themeName="themeName" :screenSize="screenSize" v-else-if="input.type=='slot'" :dataSource="input">
                    <template v-if="input.slot=='slot1'"><slot name="slot1"></slot></template>
                    <template v-else-if="input.slot=='slot2'"><slot name="slot2"></slot></template>
                    <template v-else-if="input.slot=='slot3'"><slot name="slot3"></slot></template>
                    <template v-else-if="input.slot=='slot4'"><slot name="slot4"></slot></template>
                    <template v-else-if="input.slot=='slot5'"><slot name="slot5"></slot></template>
                    <template v-else-if="input.slot=='slot6'"><slot name="slot6"></slot></template>
                    <template v-else-if="input.slot=='slot7'"><slot name="slot7"></slot></template>
                    <template v-else-if="input.slot=='slot8'"><slot name="slot8"></slot></template>
                    <template v-else-if="input.slot=='slot9'"><slot name="slot9"></slot></template>
                    <template v-else-if="input.slot=='slot10'"><slot name="slot10"></slot></template>
                    <template v-else-if="input.slot=='slot11'"><slot name="slot11"></slot></template>
                    <template v-else-if="input.slot=='slot12'"><slot name="slot12"></slot></template>
                    <template v-else-if="input.slot=='slot13'"><slot name="slot13"></slot></template>
                    <template v-else-if="input.slot=='slot14'"><slot name="slot14"></slot></template>
                    <template v-else-if="input.slot=='slot15'"><slot name="slot15"></slot></template>
                    <template v-else-if="input.slot=='slot16'"><slot name="slot16"></slot></template>
                    <template v-else-if="input.slot=='slot17'"><slot name="slot17"></slot></template>
                    <template v-else-if="input.slot=='slot18'"><slot name="slot18"></slot></template>
                    <template v-else-if="input.slot=='slot19'"><slot name="slot19"></slot></template>
                    <template v-else-if="input.slot=='slot20'"><slot name="slot20"></slot></template>      
                    <template v-else><slot :name="input.slot"></slot></template>
                </wy-form-slot>
                <template v-else-if="input.type=='custom'">
                    <!-- #ifndef MP -->
                     <component :themeName="themeName" :screenSize="screenSize" :dataSource="input" :is="input.custom" />
                    <!-- #endif --> 
                </template>
                
            </view>
            <slot></slot>
        </wy-form-group>
    </view>
</template>

<script>
    import {wyGroupEasy} from '../../libs/form.js';
    import {wyProps} from '../../libs/props.js'; 
    export default { 
        name:'wy-form-group-easy',
        mixins: [wyProps,wyGroupEasy]
    }
</script>

<style>

</style>
